<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI助理应用商店</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          min-height: 100vh;
          color: #1f2937;
      }

      .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
      }

      .header {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(20px);
          border-radius: 20px;
          padding: 40px;
          margin-bottom: 30px;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
          text-align: center;
      }

      .logo {
          font-size: 4rem;
          margin-bottom: 20px;
          animation: float 3s ease-in-out infinite;
      }

      .title {
          font-size: 2.5rem;
          font-weight: 800;
          margin-bottom: 10px;
          background: linear-gradient(135deg, #6366f1, #8b5cf6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }

      .subtitle {
          font-size: 1.2rem;
          color: #6b7280;
          margin-bottom: 30px;
      }

      .stats {
          display: flex;
          justify-content: center;
          gap: 40px;
          flex-wrap: wrap;
      }

      .stat-item {
          text-align: center;
      }

      .stat-number {
          font-size: 2rem;
          font-weight: 700;
          color: #6366f1;
      }

      .stat-label {
          color: #6b7280;
          font-size: 0.9rem;
      }

      .search-section {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(20px);
          border-radius: 16px;
          padding: 25px;
          margin-bottom: 30px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }

      .search-controls {
          display: flex;
          gap: 15px;
          align-items: center;
          flex-wrap: wrap;
      }

      .search-input {
          flex: 1;
          min-width: 300px;
          padding: 15px 20px;
          border: 2px solid #e5e7eb;
          border-radius: 50px;
          font-size: 1rem;
          transition: all 0.3s ease;
      }

      .search-input:focus {
          outline: none;
          border-color: #6366f1;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
      }

      .category-filter {
          padding: 15px 20px;
          border: 2px solid #e5e7eb;
          border-radius: 12px;
          font-size: 1rem;
          background: white;
          cursor: pointer;
      }

      .section-title {
          font-size: 1.8rem;
          font-weight: 700;
          margin-bottom: 25px;
          color: white;
          text-align: center;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .apps-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
          gap: 25px;
      }

      .app-card {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(20px);
          border-radius: 20px;
          padding: 30px;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .app-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, #6366f1, #8b5cf6);
          transform: scaleX(0);
          transition: transform 0.3s ease;
      }

      .app-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
      }

      .app-card:hover::before {
          transform: scaleX(1);
      }

      .app-header {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 20px;
      }

      .app-icon {
          width: 70px;
          height: 70px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          flex-shrink: 0;
      }

      .app-info h3 {
          font-size: 1.4rem;
          font-weight: 700;
          margin-bottom: 8px;
          color: #1f2937;
      }

      .app-category {
          display: inline-block;
          padding: 6px 12px;
          background: #f3f4f6;
          border-radius: 20px;
          font-size: 0.85rem;
          color: #6b7280;
          font-weight: 500;
      }

      .app-description {
          color: #6b7280;
          margin-bottom: 20px;
          line-height: 1.6;
          font-size: 1rem;
      }

      .app-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 25px;
      }

      .tag {
          padding: 6px 12px;
          background: rgba(99, 102, 241, 0.1);
          color: #6366f1;
          border-radius: 12px;
          font-size: 0.85rem;
          font-weight: 500;
      }

      .app-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 20px;
          border-top: 1px solid #e5e7eb;
      }

      .app-meta {
          font-size: 0.9rem;
          color: #9ca3af;
      }

      .status-badge {
          padding: 6px 12px;
          border-radius: 12px;
          font-size: 0.8rem;
          font-weight: 600;
      }

      .status-active {
          background: rgba(16, 185, 129, 0.1);
          color: #10b981;
      }

      .status-maintenance {
          background: rgba(245, 158, 11, 0.1);
          color: #f59e0b;
      }

      .launch-btn {
          padding: 12px 24px;
          background: linear-gradient(135deg, #6366f1, #8b5cf6);
          color: white;
          border: none;
          border-radius: 12px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 0.9rem;
      }

      .launch-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
      }

      .empty-state {
          text-align: center;
          padding: 80px 20px;
          color: white;
          grid-column: 1 / -1;
      }

      .empty-icon {
          font-size: 4rem;
          margin-bottom: 20px;
          opacity: 0.6;
      }

      @media (max-width: 768px) {
          .container {
              padding: 15px;
          }

          .header {
              padding: 25px;
          }

          .title {
              font-size: 2rem;
          }

          .search-controls {
              flex-direction: column;
          }

          .search-input {
              min-width: auto;
              width: 100%;
          }

          .apps-grid {
              grid-template-columns: 1fr;
          }

          .stats {
              gap: 20px;
          }
      }

      @keyframes float {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
      }

      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(30px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .app-card {
          animation: fadeInUp 0.6s ease forwards;
      }
  </style>
</head>
<body>
  <div class="container">
      <header class="header">
          <div class="logo">🤖</div>
          <h1 class="title">AI助理应用商店</h1>
          <p class="subtitle">发现和分享智能工作助手</p>
          <div class="stats">
              <div class="stat-item">
                  <div class="stat-number" id="totalApps">0</div>
                  <div class="stat-label">总应用数</div>
              </div>
              <div class="stat-item">
                  <div class="stat-number" id="activeApps">0</div>
                  <div class="stat-label">活跃应用</div>
              </div>
              <div class="stat-item">
                  <div class="stat-number" id="categories">0</div>
                  <div class="stat-label">应用分类</div>
              </div>
          </div>
      </header>

      <div class="search-section">
          <div class="search-controls">
              <input type="text" class="search-input" id="searchInput" placeholder="🔍 搜索应用名称、描述或标签...">
              <select class="category-filter" id="categoryFilter">
                  <option value="">📁 全部分类</option>
              </select>
          </div>
      </div>

      <section>
          <h2 class="section-title">🚀 应用商店</h2>
          <div class="apps-grid" id="appsGrid"></div>
      </section>
  </div>

  <script>
      // ==================== 配置区域 - AI维护专用 ====================
      // 在这里添加、修改或删除应用，AI可以直接操作这个配置对象
      
      const APP_CONFIG = {
          // 网站基本信息
          site: {
              title: "AI助理应用商店",
              subtitle: "发现和分享智能工作助手"
          },

          // 应用分类列表
          categories: [
              "运维工具",
              "数据分析", 
              "文档处理",
              "客服助手",
              "开发工具",
              "办公助手",
              "其他"
          ],

          // 应用列表 - AI维护：在这里添加新应用
          apps: [
              {
                  name: "体系标准助理",
                  category: "运维工具",
                  icon: "⚙️",
                  description: "DC 运维事业部运维体系知识赋能下的 AI 助理，专业的运维知识库支持，帮助快速解决运维问题和标准化流程。",
                  url: "https://your-ops-assistant-url.com",
                  developer: "运维团队",
                  tags: ["运维", "知识库", "标准化", "问题解决"],
                  status: "active"
              },
              {
                  name: "CMDB小助理",
                  category: "运维工具", 
                  icon: "💾",
                  description: "基于RAG知识库的智能对话工具，专为设备运维、管理和技术支持场景设计，提供设备信息查询和故障诊断。",
                  url: "https://your-cmdb-assistant-url.com",
                  developer: "技术团队",
                  tags: ["CMDB", "RAG", "设备管理", "故障诊断"],
                  status: "active"
              },
              {
                  name: "互联名词小助理",
                  category: "文档处理",
                  icon: "📚", 
                  description: "世纪互联公司已发布文档中专有名词的解析工具，快速了解公司术语和概念，提升文档理解效率。",
                  url: "https://your-terminology-assistant-url.com",
                  developer: "文档团队",
                  tags: ["术语", "解析", "文档", "概念"],
                  status: "active"
              },
              {
                  name: "数据分析助手",
                  category: "数据分析",
                  icon: "📊",
                  description: "智能数据分析工具，支持多种数据格式导入，自动生成图表和分析报告，让数据洞察变得简单高效。",
                  url: "https://your-data-analysis-url.com", 
                  developer: "数据团队",
                  tags: ["数据分析", "图表", "报告", "可视化"],
                  status: "active"
              },
              {
                  name: "代码审查助手",
                  category: "开发工具",
                  icon: "👨‍💻",
                  description: "AI驱动的代码审查工具，自动检测代码质量问题，提供优化建议，提升代码规范性和可维护性。",
                  url: "https://your-code-review-url.com",
                  developer: "开发团队", 
                  tags: ["代码审查", "质量检测", "优化建议", "规范"],
                  status: "active"
              },
              {
                  name: "会议记录助手",
                  category: "办公助手",
                  icon: "📝",
                  description: "智能会议记录和总结工具，自动识别关键信息，生成会议纪要和待办事项，提升会议效率。",
                  url: "https://your-meeting-assistant-url.com",
                  developer: "办公团队",
                  tags: ["会议记录", "总结", "待办事项", "效率"],
                  status: "maintenance"
              }
          ]
      };

      // ==================== 核心功能代码 - 无需修改 ====================
      
      class AIAppsStore {
          constructor() {
              this.apps = APP_CONFIG.apps;
              this.categories = APP_CONFIG.categories;
              this.filteredApps = [...this.apps];
              this.init();
          }

          init() {
              this.loadCategories();
              this.updateStats();
              this.renderApps();
              this.bindEvents();
          }

          loadCategories() {
              const categoryFilter = document.getElementById('categoryFilter');
              this.categories.forEach(category => {
                  const option = document.createElement('option');
                  option.value = category;
                  option.textContent = category;
                  categoryFilter.appendChild(option);
              });
          }

          updateStats() {
              const activeApps = this.apps.filter(app => app.status === 'active');
              document.getElementById('totalApps').textContent = this.apps.length;
              document.getElementById('activeApps').textContent = activeApps.length;
              document.getElementById('categories').textContent = this.categories.length;
          }

          getIconBackground(index) {
              const gradients = [
                  'linear-gradient(135deg, #667eea, #764ba2)',
                  'linear-gradient(135deg, #f093fb, #f5576c)',
                  'linear-gradient(135deg, #4facfe, #00f2fe)',
                  'linear-gradient(135deg, #43e97b, #38f9d7)',
                  'linear-gradient(135deg, #fa709a, #fee140)',
                  'linear-gradient(135deg, #a8edea, #fed6e3)',
                  'linear-gradient(135deg, #ffecd2, #fcb69f)',
                  'linear-gradient(135deg, #ff8a80, #ea6100)'
              ];
              return gradients[index % gradients.length];
          }

          getStatusBadge(status) {
              const statusMap = {
                  'active': { class: 'status-active', text: '正常运行' },
                  'maintenance': { class: 'status-maintenance', text: '维护中' },
                  'deprecated': { class: 'status-deprecated', text: '已停用' }
              };
              const statusInfo = statusMap[status] || statusMap['active'];
              return `<span class="status-badge ${statusInfo.class}">${statusInfo.text}</span>`;
          }

          renderApps(apps = this.filteredApps) {
              const appsGrid = document.getElementById('appsGrid');
              
              if (apps.length === 0) {
                  appsGrid.innerHTML = `
                      <div class="empty-state">
                          <div class="empty-icon">🔍</div>
                          <h3>未找到应用</h3>
                          <p>尝试调整搜索条件或浏览其他分类</p>
                      </div>
                  `;
                  return;
              }

              appsGrid.innerHTML = apps.map((app, index) => `
                  <div class="app-card" onclick="window.open('${app.url}', '_blank')" style="animation-delay: ${index * 0.1}s">
                      <div class="app-header">
                          <div class="app-icon" style="background: ${this.getIconBackground(index)}">
                              ${app.icon}
                          </div>
                          <div class="app-info">
                              <h3>${app.name}</h3>
                              <span class="app-category">${app.category}</span>
                          </div>
                      </div>
                      <div class="app-description">${app.description}</div>
                      <div class="app-tags">
                          ${app.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                      </div>
                      <div class="app-footer">
                          <div class="app-meta">开发者：${app.developer}</div>
                          <div style="display: flex; gap: 15px; align-items: center;">
                              ${this.getStatusBadge(app.status)}
                              <button class="launch-btn" onclick="event.stopPropagation(); window.open('${app.url}', '_blank')">
                                  启动应用
                              </button>
                          </div>
                      </div>
                  </div>
              `).join('');
          }

          filterApps() {
              const searchTerm = document.getElementById('searchInput').value.toLowerCase();
              const categoryFilter = document.getElementById('categoryFilter').value;
              
              this.filteredApps = this.apps.filter(app => {
                  const matchesSearch = !searchTerm || 
                      app.name.toLowerCase().includes(searchTerm) ||
                      app.description.toLowerCase().includes(searchTerm) ||
                      app.tags.some(tag => tag.toLowerCase().includes(searchTerm)) ||
                      app.developer.toLowerCase().includes(searchTerm);
                  
                  const matchesCategory = !categoryFilter || app.category === categoryFilter;
                  
                  return matchesSearch && matchesCategory;
              });
              
              this.renderApps();
          }

          bindEvents() {
              document.getElementById('searchInput').addEventListener('input', () => this.filterApps());
              document.getElementById('categoryFilter').addEventListener('change', () => this.filterApps());
          }
      }

      // 初始化应用
      document.addEventListener('DOMContentLoaded', () => {
          new AIAppsStore();
      });

      // ==================== AI维护说明 ====================
      /*
      AI维护指南：
      
      1. 添加新应用：
         在 APP_CONFIG.apps 数组中添加新对象，包含以下字段：
         - name: 应用名称
         - category: 应用分类（必须是categories中的一个）
         - icon: 应用图标（emoji）
         - description: 应用描述
         - url: 应用链接
         - developer: 开发者
         - tags: 标签数组
         - status: 状态（active/maintenance/deprecated）

      2. 修改应用：
         直接修改对应应用对象的属性值

      3. 删除应用：
         从 APP_CONFIG.apps 数组中删除对应对象

      4. 添加新分类：
         在 APP_CONFIG.categories 数组中添加新分类名称

      5. 修改网站信息：
         修改 APP_CONFIG.site 对象中的属性
      */
  </script>
</body>
</html>